<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机点名</title>
  <style>
    .container{
      display:flex;
      flex-direction: column;
      justify-content:space-between ;
      width:1000px;
      height:600px;     
      margin:100px auto;
      background-color: blanchedalmond;
      background:url(./1.jpg) no-repeat center center;
      background-size: cover;   
      box-shadow: 0 4px 10px rgba(235, 9, 9, 0.2);
      border-radius: 15px;
    }
    .common{
      width:200px;
      height:150px;
      font-size:20px;
      line-height:50px;
      color:#000000;
      margin:0 auto;
      border-radius: 20px;
      text-align: center;
    }
    .top{
      background-color: greenyellow;
      border:1px solid greenyellow;
    }
    .btn{  
      background-color: rgb(235, 16, 16);
      border:1px solid rgb(235, 16, 16);
    }
  
    .btn:active {
      background-color: rgba(66, 57, 156, 2);
      transform: scale(1.0);
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="top common">
      大佬队
    </div>
    <button class="btn common">随机点名</button>
  </div>
  <script >
    const btn = document.querySelector('.btn');
    const p =  document.querySelector('.top');
    const arr = ['少年志队','打不死六人组','老实人队','强盛集团','静水流深队','志权队','六福吃鸡队','大佬队','传奇队','你说我对不队','奶龙大帝']
    btn.onclick = ()=>{
      const randomIndex = Math.floor(Math.random() * arr.length);
      p.innerText = arr[randomIndex];
      
    }
  </script>
</body>
</html>